<template>
  <div class="div1">
    <div class="div2">
      <el-tabs v-model="subjectId" type="card" @tab-click="selectCourse" stretch style="width:1050px;margin-top:40px">
        <el-tab-pane label="全部科目" name=0 style="width:280px;"></el-tab-pane>
        <el-tab-pane label="C语言" name=1 style="width:100px;"></el-tab-pane>
        <el-tab-pane label="C++" name=2 style="width:100px;"></el-tab-pane>
        <el-tab-pane label="Java" name=3 style="width:100px;"></el-tab-pane>
        <el-tab-pane label="Python" name=4 style="width:100px;"></el-tab-pane>
        <el-tab-pane label="JavaScript" name=5 style="width:100px;"></el-tab-pane>
        <el-tab-pane label="微专业" name=13 style="width:100px;"></el-tab-pane>
      </el-tabs>
      <el-tabs v-model="payType" type="card" @tab-click="selectCourse" stretch style="width:450px;margin-top:20px">
        <el-tab-pane label="全部付费类型" name=" " ></el-tab-pane>
        <el-tab-pane label="免费" name="0" style="width:150px;"></el-tab-pane>
        <el-tab-pane label="付费" name="1" style="width:150px;"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="div3">
    <!--导航-->
    <p style="margin-bottom:10px"><span style="font-size:20px;"><b>全部课程</b></span><span style="font-size:16px;margin-left:20px;float: right;">共找到{{this.pages.total}}个结果</span></p>
    <!-- 中心内容内容 -->
    <div style="width:1250px;height:700px">
    <div class="div6-3" v-for="item in homePage" :key='item.id' @click="jingxuan(item.id)" >
       <el-card>
            <img :src="`http://101.43.223.224:8765/image/getImageById?id=${item.imageId}`" class="img2" />
            <p class="p3-1">标题：{{item.courseTitle}}</p>
            <p class="p3-1"><span>导师：</span><span>{{ item.tname }}</span></p>
            <hr>
            <p class="p3-1"> <span style="font-size:12px">已有149人参加课程</span> 
            <span style="font-size:20px; float: right; color: red;margin-right:10px" v-if="item.payType=='0'">免费</span>
            <span style="font-size:20px; float: right; color: red;margin-right:10px" v-if="item.payType=='1'"><span style="font-size:15px"><b>￥</b></span>{{item.price}}</span>
            </p>
       </el-card>
        </div>
        </div>
        <div class="div7">
          <!-- 分页 --> 
        <el-pagination style="margin-left:30px"
          :page-sizes="[8, 16]"
          :page-size="pages.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pages.total"
          background
          :current-page.sync="pages.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
        </div>
        
    </div>
  </div>
</template>

<script>
export default {
    data () {
      return {
        //条数
      total: 0,
        subjectId:0,
        payType:' ',
        homePage: [],
        pages: {
        //当前页
        pageNum: 1,
        //每页几条数据
        pageSize: 8,
        total:0,
      },
        radio1: '上海',
        radio2: '北京',
        radio3: '上海',
        radio4: '',
        
        selectedSpan: '全部模块',
        selectedSpan1: 'Java',
        courses: [
        {
          id: 1,
          name: 'Java',
          modules: [
            { id: 1, name: '全部模块' },
            { id: 2, name: 'Java入门' },
            { id: 3, name: 'Java进阶' }
          ]
        },
        {
          id: 2,
          name: 'Python',
          modules: [
            { id: 4, name: '全部模块' },
            { id: 5, name: 'Python入门' },
            { id: 6, name: 'Python进阶' }
          ]
        },
        // 添加其他课程和对应的模块数据
      ],
      };
  },
    mounted () {
      this.selectCourse()
  },
    methods:{
      // 点击精选课跳转页面
      jingxuan(data){
          console.log(data)
          this.$router.push({name: 'order', query: {id: data}})
        },
      //全查课程
    selectCourse() {
      console.log(this.subjectId);
      this.$axios
        .get("/newCourse/selectCoursePc", {
          params: {
            subjectId: this.subjectId,
            payType: this.payType,
            pageNum: this.pages.pageNum,
            pageSize: this.pages.pageSize,
          },
        })
        .then((res) => {
          if ((res.code = 200)) {
            //教师信息表格赋值
            this.homePage = res.data.data.content;
            this.pages.total=res.data.data.totalSize
            console.log(res.data.data.totalSize)
            this.selectPSubject(), this.selectTeacher(), (this.subjectId = "");
            this.payType = "";
            
          }
        })
        .catch((err) => {});
    },
      toggleBackgroundClass(event) {
      event.target.classList.toggle('active');
    },
    selectSpan(spanText) {
      this.selectedSpan = spanText;
    },
    selectSpan1(spanText) {
      this.selectedSpan1 = spanText;
    },
    // selectCourse(course) {
    //   this.selectedCourse = course;
    //   this.selectedModule = course.modules[0]; // 默认选择课程的第一个模块
    // },
    selectModule(module) {
      this.selectedModule = module;
    },
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.selectCourse();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.selectCourse();
    },
  },
}
</script>

<style scoped>
div{
  font-family: 微软雅黑;
}
.div1{
    width: 1200px;
    height: 100%;
    margin: auto;
    
}
.div2{
  width: 100%;
  height: 160px;
}
.div2-1{
  width: 100%;
  height: 70px;
}
.div2-1 div{
  float: left;
  margin-top: 20px;
  margin-left: 20px;
}
.div2-1 span{
  float: left;
  width: 100px;
  height: 30px;
  text-align: center;
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 5px;
  cursor: pointer; 
}
.div2-1 span.selected {
  background-color: rgb(49, 124, 228);
  color: aliceblue;
}
.div2-2{
  width: 100%;
  height: 70px;
}
  .div2-2 div{
  float: left;
  margin-top: 20px;
  margin-left: 20px;
}
.div2-2 span{
  float: left;
  width: 100px;
  height: 30px;
  text-align: center;
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 5px;
  cursor: pointer; 
}
.div2-2 span.selected {
  background-color: rgb(49, 124, 228);
  color: aliceblue;
}
.div3{
 width: 100%;
 height: 100%;
}
.img2{
    width: 250px;
    height: 150px;
    text-align: center;
    margin-bottom: 13px;
    border-radius: 6px;
    float: left;
  }
.div4{
    width: 290px;
    height: 300px;
    float: left;
    margin-top: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    box-shadow: -10px -10px var(--color-1),
    15px 10px var(--color-2);
    transition: box-shadow 0.25s ease-in-out,
    transform 0.25s ease-in-out;
    cursor: pointer; 
  }
  .div4:hover {
    box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025);
    }
  .p1{
    color: #000000;
    font-size: 16px;
    float: left;
    margin-top: 8px;
    margin-left: 5px;
  }
 .p2{
    color: #000000;
    font-size: 14px;
    float: left;
    margin-top: 8px;
    margin-left: 5px;
  }
 .p3{
    width: 96%;
    height: 60px;
    float: left;
    color: #000000;
    font-size: 14px;
    margin-top: -9px;
    margin-left: 7px;
    /* background-color: #ada9a9; */
    border-top: 1px solid #ada9a9;
  }
  .div5{
    width: 290px;
    height: 300px;
    float: left;
    margin-top: 10px;
    margin-left: 13px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    box-shadow: -10px -10px var(--color-1),
    15px 10px var(--color-2);
    transition: box-shadow 0.25s ease-in-out,
    transform 0.25s ease-in-out;
    cursor: pointer; 
  }
  .div5:hover {
    box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025);
    }
    .div6-3{
    width: 290px;
    height: 350px;
    float: left;
    margin-top: 28px;
    margin-left: 10px;
 
    border-radius: 6px;
    /* transition: all .3s; */
    box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out;
  }
  .div5-2[data-v-c6fb6236] {
  width: 290px;
  height: 318px;
  float: left;
  margin-top: 1px;
  background-color: rgb(255, 255, 255);
  border-radius: 6px;
  transition: all .3s;
  box-shadow: -10px -10px var(--color-1), 15px 10px var(--color-2);
  transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.div7{
  width: 100%;
  height: 50px;
  margin-top: 100px;
}
</style>